React State Control -- React 全局状态管理

function App() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();
  return (
    <div>
      {count}
      <button onClick={() => dispatch({ type: "increment", payload: 5 })}>
        +5
      </button>
      <button onClick={() => dispatch({ type: "increment", payload: 10 })}>
        +10
      </button>
    </div>
  );
}

const increment = { type: "increment", payload: 5 };

function App() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();
  return (
    <div>
      {count}
      <button onClick={() => dispatch(increment)}>+5</button>
      <button onClick={() => dispatch(increment)}>+10</button>
    </div>
  );
}

import { useDispatch, useSelector } from "react-redux";

// action creator 函数: 返回 action 对象的函数
const increment = (payload) => ({ type: "increment", payload });

function App() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();
  return (
    <div>
      {count}
      <button onClick={() => dispatch(increment(5))}>+5</button>
      <button onClick={() => dispatch(increment(10))}>+10</button>
    </div>
  );
}

// src/Message.js
import { useRef } from "react";
import { useDispatch, useSelector } from "react-redux";

const saveMessage = (payload) => ({ type: "save_message", payload });

function Message() {
  // 和 input 进行绑定, 用于获取用户在文本框中输入的内容
  const inputRef = useRef();
  // 获取用于发送指令的 dispatch 方法
  const dispatch = useDispatch();
  // 从 store 中获取状态
  const message = useSelector((state) => state.message);
  // 用户发送 message 的方法
  const onMessageSendHandler = () => dispatch(saveMessage(inputRef.current.value));
  return (
    <>
      <input ref={inputRef} />
      <button onClick={onMessageSendHandler}>send</button>
      {message}
    </>
  );
}

// src/index.js
// 在状态初始值中加入 message
export const store = createStore(reducer, { count: 0, message: "" });

// src/index.js
function reducer(state, action) {
  switch (action.type) {
    case "increment":
      // 在修改状态时, 要先获取到原有状态, 在原有状态的基础上创建新状态, 返回新状态
      return { ...state, count: state.count + action.payload };
    // 在 reducer 函数中加入处理 message 状态的代码
    case "save_message":
      return { ...state, message: action.payload };
    default:
      return state;
  }
}

// counter 状态的初始值
// 一个大的 reducer 函数被拆分成了多个小的 reducer 函数，每个 reducer 函数负责处理不同的状态
// 每个 reducer 函数处理的状态又都会有初始值，由于原来的一个状态的初始值变成了现在的多个状态的初始
// 所以这个初始值就不能通过 createStore 方法的第二个参数传递了
// 所以现在状态的默认值改成了通过函数参数默认值的方式进行传递
const counterInitialState = { count: 0 };

// counterReducer 函数用于处理并返回和 counter 相关的状态
function counterReducer(state = counterInitialState, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + action.payload };
    default:
      return state;
  }
}

const messageInitialState = { value: "" };

// messageReducer 函数用于处理并返回和 message 相关的状态
function messageReducer(state = messageInitialState, action) {
  switch (action.type) {
    case "save_message":
      return { value: action.payload };
    default:
      return state;
  }
}

// combineReducers 方法的参数是一个对象, 这个对象就是 Store 对象中存储的状态对象
// 对象中的属性就是状态属性，属性值就是用于返回状态的 reducer 函数
// 所以现在用于存储状态的 store 对象长成这样: {counter: {count: 0}, message: {value: ""}}
// combineReducers 方法的返回值就是合并好的 reducer 函数, 我们可以将它传递给 createStore 方法
// reducer 函数状态拆分是为了方便代码维护，reducer 函数合并是为了将 reducer 函数作为参数传递给 createStore 方法

// {count: 0, message: ''}
// {counter: {count: 0}, message: {value: ''}}
const reducers = combineReducers({
  counter: counterReducer,
  message: messageReducer,
});

// 将合并之后的 rootReducer 函数作为 createStore 方法的参数
// 同时去除原本的第二个参数, 状态初始值
export const store = createStore(reducers);

function App() {
  const count = useSelector((state) => state.counter.count);
}

function Message() {
  const message = useSelector((state) => state.message.value);
}

// src/state/action-types/counter.js
export const INCREMENT = "increment";

// src/state/action-types/message.js
export const SAVE_MESSAGE = "save_message";

// src/state/action-creators/counter.js
import { INCREMENT } from "../action-types/counter";

export const increment = (payload) => ({ type: INCREMENT, payload });

// src/state/action-creators/message.js
import { SAVE_MESSAGE } from "../action-types/message";

export const saveMessage = (payload) => ({ type: SAVE_MESSAGE, payload });

// src/state/reducers/counter.js
import { INCREMENT } from "../action-types/counter";

export default function counterReducer(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
  }
}

// src/state/reducers/message.js
import { SAVE_MESSAGE } from "../action-types/message";

export default function messageReducer(state = initialState, action) {
  switch (action.type) {
    case SAVE_MESSAGE:
  }
}

import { useDispatch } from "react-redux";
import { bindActionCreators } from "redux";
import { actionCreators } from "../state";

export const useActions = () => {
  const dispatch = useDispatch();
  return bindActionCreators(actionCreators, dispatch);
};

/**
 * actionCreators 是一个对象，对象中存储了所有的 action creator 函数
 * actionCreators => {increment: (){}, save_message: () {}}
 * bindActionCreators => {increment: dispatch(increment)}
 */

import { applyMiddleware } from "redux";
import logger from "./middlewares/logger";

export const store = createStore(rootReducer, applyMiddleware(logger));

import logger from "./middlewares/logger";
import speak from "./middlewares/speak";

// 先执行 speak, 后执行 logger
export const store = createStore(rootReducer, applyMiddleware(speak, logger));

// src/state/store.js
import { applyMiddleware } from "redux";
import thunk from "redux-thunk";

export const store = createStore(reducers, applyMiddleware(thunk));

// src/state/action-types/packages.action.type.js
export const SEARCH_PACKAGES = "search_packages";
export const SEARCH_PACKAGES_SUCCESS = "search_packages_success";
export const SEARCH_PACKAGES_ERROR = "search_packages_error";

// src/state/reducers/packages.reducer.js
import { 
  SEARCH_PACKAGES, 
  SEARCH_PACKAGES_SUCCESS, 
  SEARCH_PACKAGES_ERROR 
} from "../action-types/packages.action.type.js";

const initialState = {
  list: [],
  loading: false,
  error: null,
};

export default function packagesReducer(state = initialState, action) {
  switch (action.type) {
    case SEARCH_PACKAGES:
      return {
        loading: true,
        error: null,
        list: [],
      };
    case SEARCH_PACKAGES_SUCCESS:
      return {
        loading: false,
        error: null,
        list: action.payload,
      };
    case SEARCH_PACKAGES_ERROR:
      return {
        loading: false,
        error: action.error,
        list: [],
      };
    default:
      return state;
  }
}

import packagesReducer from "./packages"

export const reducers = combineReducers({
  packages: packagesReducer,
});

// src/state/action-creators/packages.action.creator.js
import axios from "axios";
import {
  SEARCH_PACKAGES,
  SEARCH_PACKAGES_ERROR,
  SEARCH_PACKAGES_SUCCESS,
} from "../action-types/packages.action.type";

export const searchPackages = (key) => async (dispatch) => {
  dispatch({ type: SEARCH_PACKAGES });
  try {
    const { data } = await axios.get(`https://registry.npmjs.org/-/v1/search`, {
      params: {
        text: key,
      },
    });
    dispatch({
      type: SEARCH_PACKAGES_SUCCESS,
      payload: data.objects.map((item) => item.package.name),
    });
  } catch (error) {
    dispatch({ type: SEARCH_PACKAGES_ERROR, error: error.message });
  }
};

import { useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { searchPackages } from "./state/action-creators/packages.action.creator";

export default function App() {
  const dispatch = useDispatch();
  const packages = useSelector((state) => state.packages);
  const inputRef = useRef();

  const getPackages = () => {
    if (packages.loading) {
      return <div>loading...</div>;
    }
    if (packages.error) {
      return <div>{packages.error}</div>;
    }
    return (
      <div>
        <pre>{JSON.stringify(packages, null, 2)}</pre>
      </div>
    );
  };

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={() => dispatch(searchPackages(inputRef.current.value))}>
        search
      </button>
      {getPackages()}
    </>
  );
}

// createThunkMiddleware 方法用于返回中间件函数
function createThunkMiddleware(extraArgument) {
  // 返回中间件函数
  return ({ dispatch, getState }) => next => action => {
    // 如果 action 是函数类型
    if (typeof action === 'function') {
      // 调用函数并传递相关参数
      return action(dispatch, getState, extraArgument);
    }
    // 如果 action 是对象类型, 调用 next 执行下一个中间件函数
    return next(action);
  };
}
// 调用 createThunkMiddleware 得到中间件函数
const thunk = createThunkMiddleware();

// 暴露获取中间件函数的方法, 用于方便开发者自己传递 extraArgument 参数
thunk.withExtraArgument = createThunkMiddleware;

// 导出默认创建好的 thunk 中间件函数
export default thunk;

export const SEARCH_PACKAGES = "search_packages";
export const SEARCH_PACKAGES_SUCCESS = "search_packages_success";
export const SEARCH_PACKAGES_ERROR = "search_packages_error";

import { SEARCH_PACKAGES, SEARCH_PACKAGES_ERROR, SEARCH_PACKAGES_SUCCESS } from "../action-types/packages";

export const search_packages = (payload) => ({type: SEARCH_PACKAGES,payload});
export const search_packages_success = (payload) => ({type: SEARCH_PACKAGES_SUCCESS, payload});
export const search_packages_error = (error) => ({type: SEARCH_PACKAGES_ERROR, error});

import axios from "axios";
import { put, takeEvery } from "redux-saga/effects";
import { search_packages_error, search_packages_success } from "../action-creators/packages";
import { SEARCH_PACKAGES } from "../action-types/packages";

function* searchPackages(action) {
  try {
    const { data } = yield axios.get(`https://registry.npmjs.org/-/v1/search`, {
      params: {
        text: action.payload,
      },
    });
    yield put(
      search_packages_success(data.objects.map((item) => item.package.name))
    );
  } catch (error) {
    yield put(search_packages_error(error));
  }
}
// reducer 和 saga 可以同时匹配同一个 action, reducer 先接收, saga 后接收
export default function* packageSaga() {
  yield takeEvery(SEARCH_PACKAGES, searchPackages);
}

import { SEARCH_PACKAGES, SEARCH_PACKAGES_ERROR, SEARCH_PACKAGES_SUCCESS } from "../action-types/packages";

const initialState = {
  list: [],
  loading: false,
  error: null,
};

export default function packagesReducer(state = initialState, action) {
  switch (action.type) {
    case SEARCH_PACKAGES:
      return {
        loading: true,
        error: null,
        list: [],
      };
    case SEARCH_PACKAGES_SUCCESS:
      return {
        loading: false,
        error: null,
        list: action.payload,
      };
    case SEARCH_PACKAGES_ERROR:
      return {
        loading: false,
        error: action.error,
        list: [],
      };
    default:
      return state;
  }
}

import { useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { search_packages } from "../state/action-creators/packages";

function Packages() {
  const inputRef = useRef();
  const dispatch = useDispatch();
  const packages = useSelector((state) => state.packages.list);
  const onClickHandler = () => {
    dispatch(search_packages(inputRef.current.value));
  };
  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={onClickHandler}>search</button>
      <pre>{JSON.stringify(packages, null, 2)}</pre>
    </>
  );
}

export default Packages;

// 合并 saga
import { all } from "redux-saga/effects";
import packageSaga from "./packages";

export default function* sagas() {
  yield all([packageSaga()]);
}

import createSagaMiddleware from "redux-saga";
import sagas from "./sagas";

const sagaMiddleware = createSagaMiddleware();
export const store = createStore(reducers, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(sagas);

import { createAction } from "redux-actions";

// createAction 方法用于创建 Action Creator 函数
// 它在 reducer 函数中也用于 action 对象类型的匹配
export const increment = createAction("increment");

// increment() -> {type: "increment"}
// increment(1) -> {type: "increment", payload: 1}

import { handleActions as createReducer } from "redux-actions";
import { increment } from "../action-creators/counter";

const initialState = { count: 0 };

// createReducer 函数用于创建 reducer 函数
// 它的理念是对原有的 reducer 函数中的 switch case 进行拆分, 拆分为多个小的函数
const counterReducer = createReducer(
  {
    [increment]: (state, action) => ({
      ...state,
      count: state.count + action.payload,
    }),
  },
  initialState
);

export default counterReducer;

// createSlice: 用于创建状态切片
import { createSlice } from "@reduxjs/toolkit";

// actions: 对象类型, 用于存储 action creator 函数, 函数名字和 reducers 配置选项中 reducer 函数的名字相对应
const { actions, reducer: TodoReducer } = createSlice({
  // createSlice 方法将会返回 action creator 函数, action creator 函数将要返回 action 对象
  // 按照约定, action 对象中的 type 属性值应该由两部分组成, 第一部分表示你要处理什么状态, 第二部分表示你要对该状态进行什么处理
  // 这样约定的目的是为了让代码看起来更加的清晰 {type: "todos/addTodo"}
  // name 属性配置的就是 action 对象中 type 属性值的一部分, 表示你要对什么状态进行处理
  name: "todos",
  // initialState 配置的是当前状态切片中状态的初始值
  initialState: [],
  // reducers 对象中配置的是对状态进行处理的 reducer 函数
  // 在原本的 reducer 函数中, 对状态进行的不同的处理是通过 switch case 语句匹配 action.type 属性实现的
  // ReduxToolkit 将原本的 switch case 抽象成了多个 reducer 函数, 每个 reducer 函数对应的就是原本 switch case 中的一种情况
  // 在 ReduxToolkit 中 reducer 函数的名字会作为 action 对象中 type 属性值的第二部分, 这样的话就形成了完整的 type 属性值了
  reducers: {
    // 添加任务
    addTodo(state, action) {
      // 在 ReduxToolkit 中的 reducer 函数里, 可以直接对状态进行处理, 不必拷贝新的状态再对其进行处理
      // 因为 ReduxToolkit 内部集成了不可变数据结构, 此处操作不会改变原有状态
      // 状态处理完成后也不必显式的在 reducer 函数中返回新的处理后的状态, 内部会帮助我们使用新状态替换旧状态
      // action.payload 是 ReduxToolkit 为 action 对象添加的属性, 属性值是调用 action creator 函数时传递的参数
      state.push(action.payload);
    },
  },
});
// 导出 action creator 函数, 供组件使用
export const { addTodo } = actions;
// 导出 reducer 函数, 因为在后续的代码中还是要合并 reducer 函数
export default TodoReducer;

import { nanoid } from "@reduxjs/toolkit";

createSlice({
  reducers: {
    addTodo: {
      reducer(state, action) {
        state.push(action.payload);
      },
      prepare(payload) {
        return {
          payload: { ...payload,  id: nanoid(), date: new Date },
        };
      },
    },
  },
});

// 导入 createAsyncThunk 方法, 用于处理异步代码
import { createAsyncThunk } from "@reduxjs/toolkit";
// 导入 axios 对象, 用于发送 Ajax 请求
import axios from "axios";

// 调用 createAsyncThunk 方法, 用于处理异步代码
// createAsyncThunk 方法的第一个参数是 action 对象中 type 属性值的前缀, 按照约定, 异步 action 的 type 属性值由三部分构成
// 第一部分表示要对什么状态进行处理, 第二部分表示对状态进行什么处理, 第三部分表示对状态处理的过程进行到哪一步了
// 等待: todos/loadTodos/pending, 成功: todos/loadTodos/fulfilled, 失败: todos/loadTodos/rejected

// createAsyncThunk 方法的第二个参数是函数类型, 用于放置步代码
// 该参数函数有一个 payload 参数, 是调用 action creator 函数时传递的参数

// createAsyncThunk 方法的返回值是 action creator 函数, 调用它并将返回值传递给 dispatch, 可以触发该异步操作的执行
export const loadTodos = createAsyncThunk("todos/loadTodos", (payload) => {
  // 异步操作成功, 返回异步操作结果, 它将会被作为 fulfilled action 的 payload
  // 异步操作失败, 抛出异常, 它将会作为 rejected action 的 error
  try {
    return axios.get(payload).then((response) => response.data);
  } catch (error) {
    throw new Error("自定义错误信息");
  }
});

const { actions, reducer: TodoReducer } = createSlice({
  // 通过 extraReducers 配置项处理异步 action 
  extraReducers: {
    // 等待
    [loadTodos.pending]() {
      console.log("loadTodos.pending");
    },
    // 成功
    [loadTodos.fulfilled](state, action) {
      // action.payload: 存储异步操作成功的结果
      action.payload.forEach((todo) => state.push(todo));
    },
    // 失败
    [loadTodos.rejected](state, action) {
      // action.error: 存储异步操作失败的原因
      console.log("loadTodos.rejected");
    },
  },
});

import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { loadTodos } from "../store/todos.slice";

function TodoMain() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(loadTodos("http://localhost:3001/todos"));
  }, [dispatch]);
}

export const TODO_FEATURE_KEY = "todos";

createSlice({
  name: TODO_FEATURE_KEY,
});

createAsyncThunk(
  `${TODO_FEATURE_KEY}/loadTodos`
);

export default configureStore({
  reducer: {
    [TODO_FEATURE_KEY]: TodoReducer,
  }
});

function TodoMain() {
  const todos = useSelector((state) => state[TODO_FEATURE_KEY]);
}

import logger from "redux-logger";

export default configureStore({
  middleware: (getDefaultMiddeware) => {
    return getDefaultMiddeware().concat(logger);
  },
});

{
  // The unique IDs of each item. Must be strings or numbers
  ids: []
  // A lookup table mapping entity IDs to the corresponding entity objects
  entities: {}
}

{
  ids: [1,2,3],
  entities: {
    1: { "id": 1, "title": "吃饭", "isCompleted": false },
    2: { "id": 2, "title": "睡觉", "isCompleted": false },
    3: { "id": 3, "title": "打豆豆", "isCompleted": false }
  }
}

// createEntityAdapter: 用于创建实体适配器对象
import { createEntityAdapter } from "@reduxjs/toolkit";

// 创建用于存储 todo 任务列表的实体适配器
const todosAdapter = createEntityAdapter();

const { actions, reducer: TodoReducer } = createSlice({
  // 将实体适配器的初始值作为状态切片的初始状态
  initialState: todosAdapter.getInitialState(),
  reducers: {
    addTodo: {
      reducer(state, action) {
        // 向实体适配器中添加一条状态
        todosAdapter.addOne(state, action);
      }
    },
  },
  extraReducers: {
    [loadTodos.fulfilled](state, action) {
      // 向实体适配器中添加多条状态
      todosAdapter.addMany(state, action);
    },
  },
});

function TodoMain() {
  const todos = useSelector((state) => state[TODO_FEATURE_KEY].entities);
  return (
    <ul className="todo-list">
      {Object.values(todos).map((item) => ())}
    </ul>
  );
}

createSlice({
  reducers: {
    addTodo: {
      reducer: todosAdaptor.addOne,
    },
  },
  extraReducers: {
    [loadTodos.fulfilled]: todosAdaptor.addMany
  },
});

import { createSelector } from "@reduxjs/toolkit";

const { selectAll } = todosAdaptor.getSelectors();

export const selectTodos = createSelector(
  (state) => state[TODO_FEATURE_KEY],
  selectAll
);

import { loadTodos, selectTodos } from "../store/todos.slice";

const todos = useSelector(selectTodos);

// src/components/pages/Todo/index.js
import { useGetTodosQuery } from "@state";

export default function Todo() {
  // isLoading: 只有初次加载状态时为true, 后续的每次重新加载都为false
  // error: 请求出错时包含错误信息的对象
  // data: 服务器端返回的状态
  // 优化: 当组件中的其他不相关状态的变化引起组件重新渲染时, 并不会同步状态
  const { data, error, isLoading } = useGetTodosQuery({ _limit: 5, _page: page });
  // 初始加载过程中显示的等待状态
  if (isLoading) return <div>loading....</div>;
	// 请求出现错误后显示的错误信息
  if (error) return <div>{error.error}</div>;
  return <ul> {data && data.map((item) => <li key={item.id}>{item.title}</li>)} </ul>;
}

// src/state/store.js
import { setupListeners } from "@reduxjs/toolkit/dist/query";
setupListeners(store.dispatch);

// src/state/services/todo.js
import { apiService } from ".";

export const todoService = apiService.injectEndpoints({
  endpoints: (builder) => ({
    // 删除任务
    removeTodoById: builder.mutation({
      query: (id) => ({
        url: `/todos/${id}`,
        method: "delete",
      })
    })
  }),
});

export const { useRemoveTodoByIdMutation } = todoService;

// src/components/pages/Todo/index.js
import { useRemoveToByIdMutation } from "@state";

export default function Todo() {
  // removeTodoById: 调用该方法执行状态突变
  // result: 突变过程中的状态跟踪及突变结果
  const [removeTodoById, result] = useRemoveToByIdMutation();
  return <button onClick={() => removeToById(item.id)}>delete</button>;
}

// src/components/pages/Todo/index.js
export default function Todo() {
  // refetch: 调用该方法, 表示重新同步状态
  // 优化: 当组件中的其他不相关状态的变化引起组件重新渲染时, 并不会同步状态
  const { refetch } = useGetTodosQuery();
  const [removeToById, result] = useRemoveToByIdMutation();
	// 监听突变操作是否成功
  useEffect(() => {
    // 重新同步状态
    refetch();
  }, [result.isSuccess, refetch]);
}

// src/state/services/todo.js
export const todoService = apiService.injectEndpoints({
  endpoints: (builder) => ({
    // 获取任务列表
    getTodos: builder.query({
      // 为缓存数据附加标签, 通过标签可以定位到数据从而对数据进行操作
      providesTags: ["todos"],
    }),
    // 删除任务
    removeToById: builder.mutation({
      invalidatesTags: ["todos"],
    }),
  }),
});

import { useTodosPrefetch } from "@state";

export default function Todo() {
  const prefetchTodos = useTodosPrefetch("getTodos");

  const prefetchNext = useCallback(() => {
    prefetchTodos({ _page: page + 1, _limit: 5 });
  }, [prefetchTodos, page]);
  return <button onMouseEnter={prefetchNext} onClick={() => setPage((page) => page + 1)}>{page}</button>;
}

import { observer } from "mobx-react-lite"
import { useRootStore } from "../../store"
import Todo from "./Todo"

function Main() {
  const { todoStore } = useRootStore()
  const { todos } = todoStore
  return (
    <section className="main">
      <ul className="todo-list">
        {todos.map(todo => (
          <Todo key={todo.id} todo={todo} />
        ))}
      </ul>
    </section>
  )
}

export default observer(Main)

function Todo({ todo }) {
  return (
    <li>
      <div className="view">
        <input className="toggle" type="checkbox" />
        <label>{todo.title}</label>
        <button className="destroy" />
      </div>
      <input className="edit" />
    </li>
  )
}

export default Todo

import ReactDOM from "react-dom";
import App from "./App";
import { RecoilRoot } from "recoil";

ReactDOM.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>,
  document.getElementById("root")
);

import { useState } from "react";

function DarkModeSwitch({ dark, setDark }) {
  return (
    <input
      type="checkbox"
      checked={dark}
      onChange={(event) => setDark(event.target.checked)}
    />
  );
}

function Paragraph({ dark }) {
  const styles = {
    background: dark ? "black" : "white",
    color: dark ? "white" : "black",
  };
  return <p style={styles}>Paragraph ...</p>;
}

function App() {
  const [dark, setDark] = useState(false);
  return (
    <>
      <DarkModeSwitch dark={dark} setDark={setDark} />
      <Paragraph dark={dark} />
    </>
  );
}

export default App;

import { atom, useRecoilState, useRecoilValue } from "recoil";

const darkModeState = atom({
  key: "darkModeState",
  default: false,
});

function DarkModeSwitch() {
  const [dark, setDark] = useRecoilState(darkModeState);
  return (
    <input
      type="checkbox"
      checked={dark}
      onChange={(event) => setDark(event.target.checked)}
    />
  );
}

function Paragraph() {
  const dark = useRecoilValue(darkModeState);
  const styles = {
    background: dark ? "black" : "white",
    color: dark ? "white" : "black",
  };
  return <p style={styles}>Paragraph ...</p>;
}

function App() {
  return (
    <>
      <DarkModeSwitch />
      <Paragraph />
    </>
  );
}

export default App;

// src/atoms/darkMode.js
import { atom, useRecoilState, useRecoilValue } from "recoil";

const darkModeState = atom({
  key: "darkModeState",
  default: false,
});

export function useDarkModeState() {
  return useRecoilState(darkModeState);
}

export function useDarkModeValue() {
  return useRecoilValue(darkModeState);
}

import { useDarkModeState, useDarkModeValue } from "./atoms/darkMode";

function DarkModeSwitch() {
  const [dark, setDark] = useDarkModeState();
  return (
    <input
      type="checkbox"
      checked={dark}
      onChange={(event) => setDark(event.target.checked)}
    />
  );
}

function Paragraph() {
  const dark = useDarkModeValue();
  const styles = {
    background: dark ? "black" : "white",
    color: dark ? "white" : "black",
  };
  return <p style={styles}>Paragraph ...</p>;
}

function App() {
  return (
    <>
      <DarkModeSwitch />
      <Paragraph />
    </>
  );
}

export default App;

import { atom, selector, useRecoilState, useRecoilValue } from "recoil";
// 汇率
const exChangeRate = 0.1572;
// 人民币
const CNYState = atom({
  key: "CNY",
  default: 1,
});
// 根据汇率将人民币转换为美元
const USDSelector = selector({
  key: "USD",
  get: ({ get }) => {
    const CNY = get(CNYState);
    return CNY * exChangeRate;
  },
  // 设置新的美元时重新计算人民币
  set({ set }, newValue) {
    const newCNY = newValue / exChangeRate;
    set(CNYState, newCNY);
  },
});

function App() {
  const [CNY, setCNY] = useRecoilState(CNYState);
  const [USD, setUSD] = useRecoilState(USDSelector);
  return (
    <>
      <input
        type="text"
        value={CNY}
        onChange={(event) => setCNY(event.target.value)}
      />
      <input
        type="text"
        value={USD}
        onChange={(event) => setUSD(event.target.value)}
      />
    </>
  );
}

export default App;

import axios from "axios";
import { Suspense } from "react";
import { atom, selector, useRecoilState, useRecoilValue } from "recoil";

const userIdState = atom({
  key: "userId",
  default: "",
});

const userState = selector({
  key: "userState",
  get: async ({ get }) => {
    const userId = get(userIdState);
    if (userId) {
      let response = await axios.get(
        `https://jsonplaceholder.typicode.com/users/${userId}`
      );
      return response.data;
    }
  },
});

function User() {
  const user = useRecoilValue(userState);
  return (
    <ul>
      <li>{user.name}</li>
      <li>{user.email}</li>
    </ul>
  );
}

function App() {
  const [userId, setUserId] = useRecoilState(userIdState);
  return (
    <>
      <select
        value={userId}
        onChange={(event) => setUserId(event.target.value)}
      >
        <option value="">请选择用户</option>
        <option value="1">用户一</option>
        <option value="2">用户二</option>
        <option value="3">用户三</option>
      </select>
      {userId && (
        <Suspense fallback={<div>loading...</div>}>
          <User />
        </Suspense>
      )}
    </>
  );
}

export default App;

import axios from "axios";
import { Suspense, useState } from "react";
import { selectorFamily, useRecoilValue } from "recoil";

const userState = selectorFamily({
  key: "userState",
  get: (userId) => async () => {
    if (userId) {
      let response = await axios.get(
        `https://jsonplaceholder.typicode.com/users/${userId}`
      );
      return response.data;
    }
  },
});

function User({ userId }) {
  const user = useRecoilValue(userState(userId));
  return (
    <ul>
      <li>{user.name}</li>
      <li>{user.email}</li>
    </ul>
  );
}

function App() {
  const [userId, setUserId] = useState("");
  return (
    <>
      <select
        value={userId}
        onChange={(event) => setUserId(event.target.value)}
      >
        <option value="">请选择用户</option>
        <option value="1">用户一</option>
        <option value="2">用户二</option>
        <option value="3">用户三</option>
      </select>
      {userId && (
        <Suspense fallback={<div>loading...</div>}>
          <User userId={userId} />
        </Suspense>
      )}
    </>
  );
}

export default App;

import axios from "axios";
import { Suspense, useState } from "react";
import { selectorFamily, useRecoilValue } from "recoil";
import { ErrorBoundary } from "react-error-boundary";

const userState = selectorFamily({
  key: "userState",
  get: (userId) => async () => {
    if (userId) {
      let response = await axios.get(
        `https://jsonplaceholder.typicode.com/users/${userId}`
      );
      // 模拟程序出现错误
      if (userId === "4") throw new Error("用户不存在");
      return response.data;
    }
  },
});

function User({ userId }) {
  const user = useRecoilValue(userState(userId));
  return (
    <ul>
      <li>{user.name}</li>
      <li>{user.email}</li>
    </ul>
  );
}

// resetErrorBoundary: 用于重置错误边界
function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <>
      <p>发生了错误:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>重试</button>
    </>
  );
}

function App() {
  const [userId, setUserId] = useState("");
  return (
    <>
      <select
        value={userId}
        onChange={(event) => setUserId(event.target.value)}
      >
        <option value="">请选择用户</option>
        <option value="1">用户一</option>
        <option value="2">用户二</option>
        <option value="3">用户三</option>
        <option value="4">用户四</option>
      </select>
      {/*
          FallbackComponent: 指定发生错误时显示的用户界面
          onReset: 错误边界被重置时执行的回调函数
          resetKeys: 当指定的状态发生更改时重置错误边界
        */}
      <ErrorBoundary FallbackComponent={ErrorFallback} resetKeys={[userId]}>
        {userId && (
          <Suspense fallback={<div>loading...</div>}>
            <User userId={userId} />
          </Suspense>
        )}
      </ErrorBoundary>
    </>
  );
}

export default App;

import { useState } from "react";
import { atom, useRecoilState } from "recoil";

const todoListState = atom({
  key: "todoList",
  default: [],
  effects: [
    ({ setSelf, onSet }) => {
      const storedTodo = localStorage.getItem("todos");
      if (storedTodo) setSelf(JSON.parse(storedTodo));
      onSet((value) => {
        localStorage.setItem("todos", JSON.stringify(value));
      });
    },
  ],
});

function App() {
  const [title, setTitle] = useState("");
  const [todos, setTodos] = useRecoilState(todoListState);
  const addTodo = (event) => {
    if (event.key === "Enter") {
      setTodos([...todos, { title }]);
      setTitle("");
    }
  };
  return (
    <div>
      <input
        type="text"
        value={title}
        onChange={(event) => setTitle(event.target.value)}
        onKeyUp={addTodo}
      />
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;